<template>
    <div>
        <h1>按键监听工具</h1>
        <div>一般用在电脑端监听按键，常用的比如回车等</div>

        <h3>groupKey-按键监听</h3>
        <div>
            传入组合键或单个按键进行监听，返回一个方法用于销毁监听，本页面注册了一个回车监听，可以按下回车试试，离开页面后不再触发
        </div>
        <dCode :code="conf.str" />
        <div>传入等值目前只能自己打印来看，没时间列出来作为提示类型0-0</div>
        <dCode :code="conf.keystr" />
    </div>
</template>
<script setup lang="ts">
import { onUnmounted, reactive } from 'vue'

const conf = reactive({
    str: `
const kfun = KeyUtil.groupKey(['enter'], () => {
    alert('按下了回车键');
})

onMounted(()=>{
    kfun()
})`,
    keystr: `document.addEventListener('keydown', (e)=>{
    console.log(e.key);
})`
})

const kfun = KeyUtil.groupKey(['enter'], () => {
    alert('按下了回车键')
})

onUnmounted(() => {
    kfun()
})
</script>
<style lang="less" scoped></style>
